<script setup lang="ts">
import HomeRequest from '@/request/homeRequest';
import { useAppStore } from '@/store';

interface IProps {
  merchantInfo: IObtainMerchantListRes;
  collection: boolean;
}

interface IState {
  activityList: IObtainMerchantActivityRes[];
  bannerList: IObtainMerchantBannerRes[];
  hasCameras: boolean;
}

type EmitEvents = {
  (event: 'collection', payload: { hasViewCollection: boolean }): void;
};

const emits = defineEmits<EmitEvents>();
const props = defineProps<IProps>();
const state = reactive<IState>({ activityList: [], bannerList: [], hasCameras: false });
const store = useAppStore();
const { btnInformation } = store.$state;

onMounted(() => {
  fetchObtainHasMerchantSurveillanceCameras();
  fetchObtainMerchantActivity();
  fetchObtainMerchantBanner();
});

watch(
  () => props.merchantInfo,
  () => {
    fetchObtainHasMerchantSurveillanceCameras();
    fetchObtainMerchantActivity();
    fetchObtainMerchantBanner();
  },
);

// 获得商户banner
const fetchObtainMerchantBanner = () => {
  HomeRequest.ObtainMerchantBanner({ businessId: props.merchantInfo.id, serverClassifyIds: btnInformation?.classifyIds }).then((res) => {
    state.bannerList = res.data;
  });
};

// 获得商户活动
const fetchObtainMerchantActivity = () => {
  HomeRequest.ObtainMerchantActivity({ businessId: props.merchantInfo.id }).then((res) => {
    state.activityList = res.data;
  });
};

// 商户是否有摄像头
const fetchObtainHasMerchantSurveillanceCameras = () => {
  HomeRequest.ObtainHasMerchantSurveillanceCameras({ businessId: props.merchantInfo.id }).then((res) => {
    state.hasCameras = res.data > 0;
  });
};
</script>

<template>
  <view class="w-screen">
    <view class="c-pd bg-white flex pos-relative">
      <view class="w-[90px] h-[90px] rounded-[50%] overflow-hidden pos-relative">
        <van-image width="100%" height="100%" fit="cover" :src="props.merchantInfo.logo" />
      </view>
      <view v-if="state.hasCameras" class="w-[90px] h-[90px] pos-absolute border border-solid rounded-[50%] border-[#ffc300]" />
      <view v-if="state.hasCameras" class="w-[90px] h-[90px] pos-absolute w-full h-full left-0 top-0">
        <i class="i-tdesign:camera-1-filled c-color text-[18px] pos-absolute bottom-[12px] left-[85px]" />
      </view>
      <view class="flex-1 ml-[12px] justify-evenly flex flex-col">
        <view class="fw-bold c-text-16">{{ props.merchantInfo.name }}</view>
        <view class="c-text-color-grey c-text-12"
          ><text class="c-text-ellipsis-3">{{ props.merchantInfo.introduce }}</text></view
        >
      </view>
    </view>
    <scroll-view scroll-x class="w-full whitespace-nowrap overflow-hidden bg-white px-[12px] pb-12px box-border" v-if="state.activityList.length > 0">
      <view class="mr-[20px] inline-flex" v-for="item in state.activityList" :key="item.activeId">
        <view class="bg-#feeef1 overflow-hidden line-height-24px flex text-#f94d26 border-y border-l-1 border-r-0 border-#f94d26 border-solid rounded-tl-5px rounded-bl-5px" :class="item.activeShowUnit ? '' : 'border-r-1 rounded-tr-5px rounded-br-5px '">
          <view class="bg-#fedadb px-4px fw-bold font-oblique">活动</view>
          <view class="mx-8px c-text-12">{{ item.activeName }}</view>
        </view>
        <view class="bg-#feeef1" v-if="item.activeShowUnit">
          <view class="circle-top"></view>
          <view class="line"></view>
          <view class="circle-bottom"></view>
        </view>
        <view v-if="item.activeShowUnit" class="bg-#feeef1 overflow-hidden line-height-24px px-4px text-#f94d26 border-y border-r-1 border-l-0 border-#f94d26 border-solid rounded-tr-5px rounded-br-5px"> {{ item.activeShowUnit }} </view>
      </view>
    </scroll-view>
    <swiper circular autoplay :interval="4000" :indicator-dots="state.bannerList.length > 0" indicator-active-color="#ffc300" style="height: 130px">
      <swiper-item class="px-12px box-border bg-white" v-for="(item, index) in state.bannerList" :key="index">
        <image class="c-br w-full h-full" :src="item.value" lazy-load mode="aspectFill" :key="index" />
      </swiper-item>
    </swiper>
    <view class="bg-white c-pd">
      <view class="bg-#f3eeee c-br h-30px items-center px-8px inline-flex" :class="props.collection ? 'c-bg' : ''" @click="emits('collection', { hasViewCollection: !props.collection })">
        <image class="w-70px h-30px" src="https://pic.kanglailab.com/common/my_collect.png" lazy-load mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.circle-top {
  width: 12rpx;
  height: 4rpx;
  background-color: white;
  border-radius: 0 0 10rpx 10rpx;
  border-bottom: 1rpx solid #f94d26;
  border-left: 1rpx solid #f94d26;
  border-right: 1rpx solid #f94d26;
}

.line {
  margin: auto;
  width: 0;
  height: 39rpx;
  border-left: 4rpx dotted #f94d26;
}

.circle-bottom {
  width: 12rpx;
  height: 4rpx;
  background-color: white;
  border-radius: 10rpx 10rpx 0 0;
  border-top: 1rpx solid #f94d26;
  border-left: 1rpx solid #f94d26;
  border-right: 1rpx solid #f94d26;
}
</style>
